<template>
  <van-nav-bar
      title="标题"
      left-arrow
      text-light
      @click-left="onClickLeft"
      @click-right="onClickRight">
    <template #right>
      <van-icon name="search" size="18" />
    </template>
  </van-nav-bar>
  <div id="content">
    <router-view/>
  </div>
  <van-tabbar route v-model="active"  @change="onChange">
    <van-tabbar-item to="/"  icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to= "/team" icon="search" name="team">队伍</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import {useRouter} from "vue-router";

const active = ref('index');
const onChange = (index:string) => showToast(`${index}`);
const router = useRouter();

const onClickLeft = () => {
  //回到上一页
  router.back();
};
const onClickRight = () => {
  router.push('/search')
};

</script>

<style scoped>
#content {
  padding-bottom: 50px;
}
</style>